<template>
  <div class="mike-promotion-recommend-collection">
    <el-table
      :data="dataList"
      @selection-change="dataListSelectionChangeHandle"
      border
      style="width: 100%;"
      v-loading="dataListLoading"
    >
      <el-table-column
        align="center"
        header-align="center"
        type="selection"
        width="50"
      />

      <el-table-column
        :label="$t('mike.detailImg')"
        align="center"
        header-align="center"
        width="100"
      >
        <template slot-scope="scope">
          <div
            class="text-center is-align-middle is-justify-center el-row--flex"
          >
            <midea-admin-image
              :height="60"
              :previewable="true"
              :url="scope.row.url"
              :width="60"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('mike.homeImg')"
        align="center"
        header-align="center"
        width="100"
      >
        <template slot-scope="scope">
          <div
            class="text-center is-align-middle is-justify-center el-row--flex"
          >
            <midea-admin-image
              :height="60"
              :previewable="true"
              :url="scope.row.smallUrl"
              :width="60"
            />
          </div>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('model.name')"
        align="center"
        header-align="center"
        prop="collectionName"
      />
      <el-table-column
        :label="$t('model.description')"
        align="center"
        header-align="center"
        prop="ext"
      >
        <template slot-scope="scope">
          <p class="ellipsis">
            {{ scope.row.ext }}
          </p>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('mike.sn8')"
        align="center"
        header-align="center"
        prop="sn8"
      />
      <el-table-column
        :label="$t('menu.sort')"
        align="center"
        header-align="center"
        prop="sort"
      />

      <el-table-column
        :label="$t('handle')"
        align="center"
        fixed="right"
        header-align="center"
        width="150"
      >
        <!--                <template slot-scope="scope">-->
        <!--                    <el-button @click="addOrUpdateHandle(scope.row.id)" size="small" type="primary"-->
        <!--                               v-if="$hasPermission('monitor:mmonitorapilist:update')">{{ $t('update') }}-->
        <!--                    </el-button>-->
        <!--                    <el-button @click="deleteHandle(scope.row.id)" size="small" type="danger"-->
        <!--                               v-if="$hasPermission('monitor:mmonitorapilist:delete')">{{ $t('delete') }}-->
        <!--                    </el-button>-->
        <!--                </template>-->
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      @current-change="pageCurrentChangeHandle"
      @size-change="pageSizeChangeHandle"
      layout="total, sizes, prev, pager, next"
    />
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/mike.view-module'

export default {
  name: 'MikePromotionRecommendCollection',
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/midea/menu/collection/content/get/all',
        getDataListIsPage: true,
        // getDataListIsPage: true
        deleteURL: '/midea/menu/collection/content/del/'
        // deleteIsBatch: true
        // exportURL: '/sys/user/export'
      },
      dataForm: {
        sn8: '',
        name: ''
      }
    }
  },
  beforeCreate () {
    this.mixinViewModuleOptions.getDataListIsPage = true
  },
  mounted () {
    // this.getDataList()
  }
}
</script>

<style scoped></style>
